<!-- 聚合页 -->
<template>
    <div class="home_main">
        <div class="home_content">
            <div class="title">无人车运营监管平台</div>
            <div class="title2">资质严审·安全智控智能准入·全域感知</div>
            <div class="tab_box" v-for="(item, index) in state.tabList" :key="index">
                <div class="tab_title">
                    <div class="line_box"></div>
                    <div class="text_box">{{ item.title }}</div>
                    <div class="line_box2"></div>
                </div>
                <div class="tab_item_box">
                    <div
                        class="tab_item"
                        v-for="(innerItem, innerIndex) in item.children"
                        :key="innerIndex"
                        :class="innerItem.content?'':'tab_item_disabled'"
                        @click="changePage(innerItem)"
                    >
                        <div class="tab_item_content_box">
                            <div class="tab_item_title_box">
                                <div class="tab_item_title">
                                    <span>{{ innerItem.name }}</span>
                                    <img v-if="!innerItem.content" src="@/assets/images/tab_disabled.png" alt="">
                                </div>
                                <div class="tab_item_title2">{{ innerItem.remark }}</div>
                            </div>
                            <div class="tab_item_img_box" :style="{backgroundImage:'url(' +innerItem.icon+')'}" ></div>
                        </div>
                        <div class="tab_item_bg_active" v-if="innerItem.content"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import {reactive, ref,onMounted} from "vue";
import {useRouter} from "vue-router";
    // import {useMainStore} from "@/store";
    // const mainStore = useMainStore()
import { mapDict } from "@/utils/index.js";
// import { getVideoPlayUrl } from "@/utils";

const state = reactive({
    tabList: []
})
const router = useRouter();
onMounted(() => {
    getMenuList()
})
const getMenuList = (item) => {
    let routerList = JSON.parse(localStorage.getItem('userInfo')).menuList;
    // let layerList = mainStore.dictTree.find(r=>r.code==='layerPage')?.children || []
    let layerList = mapDict(['layerPage'])
    layerList = layerList.sort((a,b)=>a.sort - b.sort);
    let $tabList = []
    console.log(layerList,'routerList--layerList',routerList);
    
    layerList.map(item=>{
        let children = routerList.filter(routerItem=>routerItem.groupId == item.code);
        // let children = routerList.filter(routerItem=>routerItem.groupId);
        $tabList.push({
            title: item.name,
            children:children
        })
    })

    state.tabList = $tabList;
    console.log(state.tabList,'routerList--routerList');
    console.log(layerList,'22222',routerList);
}
const changePage = (item) => {
    // 2 是外链
    if(item.menuWay == "2"){
        let url = `${item.content}?token=${localStorage.getItem('token')}`
        console.log(url,'url--url');
        window.open(url)
    }else{
        if(item.childrenList.length > 0){
            router.push(item.childrenList[0].content)
        }else if(item.content){
            router.push(item.content)
        } 
    }
}
</script>
<style scoped lang="less">
.home_main{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    //margin-top: 54px;
    display: flex;
    justify-content: center;
    overflow-y: scroll;
    
    &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 0;
    }
    .home_content{
        margin-top: 54px;
        height: max-content;
        .title{
            font-weight: 600;
            font-size: 36px;
            line-height: 36px;
            color: #fff;
            margin-bottom: 20px;
        }
        .title2{
            font-weight: 400;
            font-size: 16px;
            line-height: 16px;
            color: #fff;
            margin-bottom: 48px;
        }
        .tab_box{
            margin-bottom: 40px;
            .tab_title{
                display: flex;
                align-items: center;
                margin-bottom: 16px;
                .line_box{
                    width: 6px;
                    height: 18px;
                    background: #15E3D3;
                }
                .text_box{
                    font-weight: 600;
                    font-size: 20px;
                    line-height: 20px;
                    color: #FFFFFF;
                    margin: 0 16px 0 8px;
                }
                .line_box2{
                    width: 163px;
                    height: 2px;
                    background: url('@/assets/images/tab_line2.png') no-repeat;
                    background-size: 100% 100%;
                }
            }
            .tab_item_box{
                display: flex;
                gap: 16px;
                .tab_item{
                    // background: url("@/assets/images/tab_item_box_bg.png") no-repeat;
                    // background-size: 100% 100%;
                    background-color: rgba(0, 204, 204, 1);
                    border-width: 1px;
                    border-style: solid;
                    border-color: rgba(0, 255, 255, 1);
                    width: 368px;
                    height: 140px;
                    position: relative;
                    .tab_item_content_box{
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        z-index: 2;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        cursor: pointer;
                        box-sizing: border-box;
                        padding: 15px 0 15px 20px;
                        .tab_item_title_box{
                            color: #FFFFFF;
                            .tab_item_title{
                                font-weight: 600;
                                font-size: 24px;
                                line-height: 24px;
                                display: flex;
                                align-items: center;
                                margin-bottom: 16px;
                                img{
                                    width: 56px;
                                    height: 22px;
                                    margin-left: 12px;
                                }
                            }
                            .tab_item_title2{
                                font-weight: 400;
                                font-size: 14px;
                                line-height: 14px;
                            }
                        }
                        .tab_item_img_box{
                            width: 110px;
                            height: 110px;
                            //background-position: 0 0;
                            background-size: 100%;
                            animation: slide2;
                            animation-duration: 0.3s;
                            animation-timing-function: steps(19);
                            animation-fill-mode: forwards;
                            /* 定义动画名称和持续时间 */
                            @keyframes slide2 {
                                0% { background-position: 0 100%; }
                                100% { background-position: 0 0;}
                            }
                        }
                    }
                    &:hover{
                        .tab_item_img_box{
                            animation: slide1;
                            animation-duration: 0.3s;
                            animation-timing-function: steps(19);
                            animation-fill-mode: forwards;
                            /* 定义动画名称和持续时间 */
                            @keyframes slide1 {
                                0% { background-position: 0 0; }
                                100% { background-position: 0 100%;}
                            }
                        }
                        .tab_item_bg_active{
                            opacity: 1;
                        }
                    }

                    .tab_item_bg_active{
                        background: url('@/assets/images/tab_item_box_bg_active.png') no-repeat;
                        background-size: 100% 100%;
                        opacity: 0;
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        transition: opacity 0.5s;
                    }

                }
                .tab_item_disabled{
                    .tab_item_content_box{
                        .tab_item_title_box{
                            color: #6199D8;
                        }
                    }
                }
            }

        }
    }
}
@media (max-width: 1366px){
    .home_main{
        .home_content{
            .title{
                font-size: 28px;
                line-height: 28px;
            }
            .title2{
                font-size: 12px;
                color: #B6C7FF;
                line-height: 12px;
            }
            .tab_box{
                margin-bottom: 30px;
                .tab_title{
                    .line_box{
                        height: 16px;
                    }
                    .text_box{
                        font-size: 16px;
                        line-height: 16px;
                    }
                }
                .tab_item_box{
                    gap: 16px;
                    .tab_item{
                        width: 284px;
                        height: 80px;
                        .tab_item_content_box{
                            .tab_item_title_box{
                                .tab_item_title{
                                    font-size: 18px;
                                    line-height: 18px;
                                    margin-bottom: 10px;
                                }
                                .tab_item_title2{
                                    font-weight: 400;
                                    font-size: 12px;
                                    line-height: 12px;
                                }
                            }
                            .tab_item_img_box{
                                width: 64px;
                                height: 64px;
                            }
                        }
                        &:hover{
                            .tab_item_bg_active{
                                opacity: 1;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
